HTML Basics: Tables

HTML Tables were introduced with the now-expired HTML 3.0 draft, and later improved and extended separately. A very large table specification is contained in RFC 1942. HTML 3.2, also known as Wilbur, uses a subset of this specification. It doesn't allow as much control over the table as the full spec, but it should be enough to create most tables.

To illustrate the process, in this document several example tables are constructed.

Constructing tables

A table is built up with rows. Each row contains multiple cells. A cell can be either a header cell or a data cell. The former are mostly used for captions or similar cells in the table, and they are often rendered with a slightly larger font and/or bold text to distinct them from the data cells. Note that the concept of columns is not used here; columns are created by cells in the same position in different rows.

General layout and captions

The TABLE tag, which encloses the entire table, may also contain one CAPTION. The caption is displayed above or below the table, and serves as a title or description for it. The location of the caption can be indicated with the ALIGN attribute - permitted values are TOP and BOTTOM.

The TABLE tag itself has five optional attributes. The ALIGN attribute controls the location of the table on the page - left, centered or right margin. This does not affect the elements inside the table, it just places the entire table there. The BORDER attribute specifies that a border should be drawn around the table, in the indicated width. If you don't specify a width, it will be a width of one.

The WIDTH attribute, which can take either a percentage or an absolute value in pixels, specifies the width of the table. This can be useful if you want to put multiple tables next to each other. Using an absolute value is not recommended, as it could force a viewer to resize its screen to see the entire table.

CELLSPACING is used to indicate how many pixels there should be between the contents of cells and the border. It takes a value in pixels. The CELLPADDING attribute is used, similarly, to indicate the whitespace in pixels between cells.

Rows and columns

Inside the table, after the caption, there should be one or more rows, indicated with TR. Each row contains zero or more cells, either header cells (TH) or data cells (TD).

The TR element surrounds one row in the table, and can be used to set the horizontal and vertical alignment of all cells in this row. The value specified in TR can be overridden in the individual cells.

A cell can overlap rows or columns. This is indicated with the ROWSPAN and COLSPAN attributes for cells. They indicate how many rows and columns, respectively, this cell will overlap. In the rows or columns after a spanning cell, do not specify this cell again.

Examples

First, a very simple table, with just two columns of data. It lists the input and output of a simple function. The input goes in the leftmost column, and the output in the rightmost one. Thus, in each row there should be two cells: the first containing an input value, and the second one the corresponding output value. For the labels above each column, a row with header cells is used.

The ALIGN attribute is used on the TR element to indicate that all data cells should be right-aligned. The caption will appear at the bottom of the table.

<TABLE BORDER>
<CAPTION ALIGN=BOTTOM>Squares</CAPTION>
<TR><TH>x <TH>f(x)
<TR ALIGN=RIGHT><TD>1 <TD> 1
<TR ALIGN=RIGHT><TD>2 <TD> 4
<TR ALIGN=RIGHT><TD>3 <TD> 9
<TR ALIGN=RIGHT><TD>4 <TD> 16
<TR ALIGN=RIGHT><TD>5 <TD> 25
</TABLE>

View it as HTML (requires table support) or as GIF image (1K).

Next, something slightly more complicated. In this example, we want to provide some (fake) statistics about genders and ages. This requires three cells per row. To make it clear what the "Male" and "Female" labels refer to, an extra label saying "Gender" should appear above it. This means we'll have to use a cell which overlaps two columns, so it will get a COLSPAN attribute with a value of two.

Also, the first cell in the first row is left empty, as the label in this row should go over the second and third cells.

<TABLE BORDER>
<TR>
<TH><TH COLSPAN=2>Gender
<TR>
<TH>Age<TH>Male<TH>Female
<TR ALIGN=CENTER>
<TH>18-24<TD>15%<TD>14%
<TR ALIGN=CENTER>
<TH>25-30<TD>30%<TD>28%
<TR ALIGN=CENTER>
<TH>30+<TD>54%<TD>57%
</TABLE>

View it as HTML (requires table support) or as GIF image (1K).

Lastly, a table which uses some of the attributes for the TABLE element to control its appearance. With just the CELLPADDING and BORDER attribute, the table from example 1 is changed quite a bit: view it as HTML (requires table support) or as GIF image (2K).

<TABLE BORDER=10 CELLPADDING=5>
<TR><TH>x <TH>f(x) 
<TR ALIGN=RIGHT><TD> 1 <TD> 1
<TR ALIGN=RIGHT><TD> 2 <TD> 4
<TR ALIGN=RIGHT><TD> 2 <TD> 4
<TR ALIGN=RIGHT><TD> 3 <TD> 9 
<TR ALIGN=RIGHT><TD> 4 <TD> 16 
<TR ALIGN=RIGHT><TD> 5 <TD> 25 
</TABLE>

For a more detailed description of tables, including the formal syntax and what is and isn't permitted inside table cells, see the tables section in the overview of HTML 3.2.

Reference index ~ HTML Basics index ~ Feedback